﻿<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />



    <link rel="stylesheet" href="../content/css/font.css">
    <link rel="stylesheet" href="../content/css/xadmin.css">
    <link rel="stylesheet" href="../content/plugin/bootstrap/css/bootstrap.min.css">
    <link rel='stylesheet' href='../content/plugin/bootstrap/css/style.css' />

    <script src="../content/js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" src="../content/js/xadmin.js"></script>
    <script type="text/javascript" src="../content/js/md5.min.js"></script>
    <script type="text/javascript" src="../content/js/cookie.js"></script>
    <script src="../content/lib/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../content/plugin/FileUpload/css/jquery.fileupload.css" />




</head>

<body>
    <div id="app">
        <div class="x-nav">

            <span class="nav-header">
                <a href="">首页</a>>
                <a href="">商品管理</a>>
                <a>
                    <cite>商品列表</cite>
                </a>
            </span>

        </div>
        <div class="x-body">
            <div class="layui-row">
                商品名称:
                <input type="text" name="username" placeholder="" v-model="search.goods_name" autocomplete="off"
                    style="height:30px;width: 100px;">

                商品状态
                <select v-model="search.goods_status" style="height:30px;width: 100px;">
                    <option value="">
                        请选择
                    </option>
                    <option v-for="item in statelist1" :value='item.id'>
                        {{item.name}}
                    </option>
                </select>
                <button class="layui-btn" v-on:click="getdata"><i class="layui-icon">&#xe615;</i></button>


            </div>
            <hr />
            <div>

                <button class="layui-btn" v-if="check()" v-on:click="add"><i class="layui-icon"></i>添加</button>

                <!-- <button class="layui-btn" v-if="check()" v-on:click="recommend(1)"><i
                        class="layui-icon">&#xe609;</i>设为推荐</button>
                <button class="layui-btn layui-btn-danger" v-if="check()" v-on:click="recommend(0)"><i
                        class="layui-icon">&#xe609;</i>取消推荐</button>

                <button class="layui-btn" v-if="check()" v-on:click="shard(1)"><i
                        class="layui-icon">&#xe641;</i>设为分享</button>
                <button class="layui-btn layui-btn-danger" v-if="check()" v-on:click="shard(0)"><i
                        class="layui-icon">&#xe641;</i>取消分享</button> -->
                <button class="layui-btn layui-btn-danger" v-if="check()" v-on:click="delall()"><i
                        class="layui-icon">&#xe641;</i>批量删除</button>
            </div>
            <hr />

            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" v-model="chooseall" @click="allcheck">
                            </th>
                            <th>
                                商品ID</th>
                            <th> 商品图片</th>
                            <th>商品名称</th>

                            <th>价格</th>

                            <th> 实际销量</th>
                            <th> 初始销量</th>
                            <th> 商品排序</th>
                            <th> 商品状态</th>
                            <th> 添加时间</th>

                            <!-- <th> 是否推荐</th>
                            <th> 推荐数</th>
                            <th> 是否分享</th>
                            <th> 分享数</th> -->
                            <th>操作</th>

                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="uitem in arrayData">

                            <td><input type="checkbox" :checked="idscheck(uitem)" @click="chooseid(uitem.id)">
                            </td>

                            <td>{{uitem.id}}</td>
                            <td>
                                <img :src="uitem.imgurl" style="width: 50px;height: 50px; object-fit: cover;
                                " />
                            </td>
                            <td>{{uitem.goods_name}}</td>

                            <td>{{uitem.goods_price}}</td>
                      
                            <td>{{uitem.sales_actual}}</td>
                            <td>{{uitem.sales_initial}}</td>
                            <td>{{uitem.goods_sort}}</td>
                            <td>
                                <span v-if="uitem.goods_status==1" style="color:green">上架</span>
                                <span style="color:red" v-else>下架</span>

                            </td>
                            <td>{{uitem.create_time}}</td>




                            <td class="td-manage">

                                <a title="编辑" v-on:click="vupdate(uitem)" href="javascript:;">
                                    <i class="layui-icon"></i>
                                </a>
                                <a title="删除" v-on:click="vdel(uitem)" v-if="check()" href="javascript:;">
                                    <i class="layui-icon">&#xe640;</i>
                                </a>
                                <a title="编辑" v-on:click="view(uitem)" v-if="check()==false" href="javascript:;">
                                    改价
                                </a>
                                <a title="删除" v-on:click="pingjia(uitem)" href="javascript:;">
                                    商品评价
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="page">
                <div>
                    <vue-nav :cur="search.page" :all="all" :allcount="allcount" :callback="callback"></vue-nav>
                </div>
            </div>

        </div>





    </div>
    <link href="../content/plugin/sweetalert/sweetalert.css" rel="stylesheet">
    <script src="../content/plugin/sweetalert/sweetalert.min.js"></script>
    <script src="../content/plugin/bootstrap/js/bootstrap.min.js"></script>
    <script src="../content/js/vue2.js"></script>
    <script src="../content/js/vue-nav.js"></script>
    <script src="../content/js/config.js"></script>

    <script>


        Array.prototype.remove = function (val) {
            var index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
        };
        var vm = new Vue({
            el: "#app",
            data: {
                all: 0,
                search: {
                    page: 1,
                    rows: 10,
                    mid: json.mid
                },
                arrayData: [],
                allcount: 0,
                menulist: [],
                addobj: {
                    parentid: 0
                },
                ids: [],
                editobj: {},
                datalist: [],
                statelist: [{ "id": "1", "name": "是" }, { "id": "0", "name": "否" }],
                statelist1: [{ "id": "1", "name": "上架" }, { "id": "0", "name": "下架" }],
                chooseall: false,
            },
            components: {
                'vue-nav': Vnav
            },
            methods: {
                check() {
                    if (localStorage.getItem("mid") == "0") {
                        return true;
                    } else {
                        return false;
                    }
                },
                searchdata: function () {
                    this.search.page = 1;
                    this.getdata();
                },

                add: function () {
                    location.href = "add.html";
                },
                addhang: function () {
                    if (this.datalist == null) {
                        this.datalist = [];
                    }
                    console.log("addhang", this.datalist);
                    var datalist = this.datalist;
                    datalist.push({});
                    this.datalist = datalist;
                },

                delcode: function (uitem) {
                    var datalist = this.datalist;
                    datalist.remove(uitem);
                    this.datalist = datalist;
                },
                getdata: function (_keycontent) {  //查询数据

                    var self = this;
                    $.post(apiurl + "/admin/goods/list", this.search, function (_result) {
                        console.log(_result);
                        self.arrayData = _result.data;
                        self.all = _result.allcount;
                        self.allcount = _result.count;
                    });

                },
                callback: function (data) {
                    var self = this;
                    this.search.page = data;
                    $.post(apiurl + "/admin/goods/list", this.search, function (_result) {
                        self.arrayData = _result.data;
                        self.all = _result.allcount;
                        self.allcount = _result.count;
                    });
                },
                vupdate: function (uitem) {

                    location.href = "edit.html?id=" + uitem.id + "&page=" + this.search.page;

                },
                view: function (uitem) {

                    location.href = "view.html?id=" + uitem.id + "&page=" + this.search.page;

                },
                peizhi: function (uitem) {
                    this.editobj = uitem;
                    console.log("uitem.datalist", uitem.datalist);
                    if (uitem.datalist != "" && uitem.datalist != "undefined") {

                        this.datalist = JSON.parse(uitem.datalist);
                    } else {


                        this.datalist = [];
                    }


                    console.log("haoqig", uitem);
                    $("#peizhibox").modal('show');
                },
                change: function (uitem) {
                    var self = this;

                    $.post(apiurl + "/admin/goods/edit2", uitem, function (data) {

                    });

                },
                vdel: function (uitem) {
                    var self = this;
                    swal({
                        title: "确定要删除吗?",
                        text: "",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "是",
                        cancelButtonText: '否',
                        closeOnConfirm: false
                    }, function () {


                        $.ajax({
                            url: apiurl + '/admin/goods/del',
                            type: 'DELETE',
                            data: { "ids": uitem.id },
                            success: function (result) {
                                if (result.status == 200) {
                                    swal("系统提示", "已删除", "success");
                                    self.getdata("");
                                } else {
                                    swal("系统提示", "系统异常", "success");
                                }
                            }
                        });

                    });
                },
                delall: function () {
                    var self = this;
                    swal({
                        title: "确定要删除吗?",
                        text: "",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "是",
                        cancelButtonText: '否',
                        closeOnConfirm: false
                    }, function () {


                        $.ajax({
                            url: apiurl + '/admin/goods/del',
                            type: 'DELETE',
                            data: { "ids": self.ids.join(",") },
                            success: function (result) {
                                if (result.status == 200) {
                                    swal("系统提示", "已删除", "success");
                                    self.getdata("");
                                } else {
                                    swal("系统提示", "系统异常", "success");
                                }
                            }
                        });

                    });
                },
                recommend: function (state) {
                    var self = this;

                    if (this.ids.length == 0) {


                        layer.msg("请选择");
                        return;
                    }

                    $.post(apiurl + "/admin/goods/updatestate", { ids: this.ids.join(","), type: "recommend", state: state }, function (data) {
                        if (data.status == 200) {
                            $("#peizhibox").modal('hide');
                            swal("success", "操作成功", "success");
                            self.getdata("");
                        } else {
                            swal("系统提示", data.message, "error");
                        }
                    });

                },

                shard: function (state) {
                    var self = this;

                    if (this.ids.length == 0) {


                        layer.msg("请选择");
                        return;
                    }
                    $.post(apiurl + "/admin/goods/updatestate", { ids: this.ids.join(","), type: "shard", state: state }, function (data) {
                        if (data.status == 200) {
                            $("#peizhibox").modal('hide');
                            swal("success", "操作成功", "success");
                            self.getdata("");
                        } else {
                            swal("系统提示", data.message, "error");
                        }
                    });

                },
                idscheck: function (uitem) {
                    var list = this.ids;

                    for (var i = 0; i < list.length; i++) {
                        if (list[i] == uitem.id) {
                            return true;
                        }
                    }
                    return false;
                },
                chooseid: function (id) {

                    let idIndex = this.ids.indexOf(id)
                    if (idIndex >= 0) {

                        this.ids.remove(id);

                    } else {

                        this.ids.push(id);


                        //this.$forceUpdate();
                    }
                },
                allcheck: function () {
                    if (this.chooseall) {
                        for (var i = 0; i < this.arrayData.length; i++) {
                            this.ids.push(this.arrayData[i].id);
                        }
                    } else {
                        this.ids = [];
                    }
                    console.log("ids", this.ids);
                },
                pingjia(uitem) {
                    location.href = "pingjia.html?goodid=" + uitem.id;
                },
            },
            created: function () {  //初始化事件里边去调用查询方法


                var page = GetRequest("page");



                if (page != undefined && page != null) {
                    this.search.page = parseInt(page);
                }


                this.getdata();


            }
        });


    </script>
</body>

</html>